This page falls somewhere between a tool and an essay. It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it.
Don’t compose without a scale.
Out of context, most would probably assume this quote recommends a rather straightforward approach to choosing a sequence of musical notes. But actually, in this case, the author’s subject centers around how to go about selecting a harmonious set of typeface sizes. In The Elements of Typographic Style, author Robert Bringhurst includes this principle as one of the old, well-traveled roads at the core of the tradition.
Of course, good typesetting requires something more than selecting a series of font sizes, just as music consists of something more than choosing notes. Rhythm, in particular, enables a sequence of notes to beat with musical life; tempo sustains their wit. It is much the same for the world of letters.
Most pages of continuous prose pulse with a particular vertical rhythm, established by the lines of its main words, sentences, and paragraphs. If a subheading is set in a different size than the rest of the main text, it needs to be offset in a way that flows with the page’s intrinsic rhythm.
For this, Bringhurst suggests another rule of thumb: Add and delete vertical space in measured intervals.
When sized correctly, the vertical spacing around a chunk of larger text can act like the rests in a musical score, allowing the main text to resume on beat.
Size and rhythm make each other interesting. Now it’s time to explore how to weave them into web pages. Bear in mind these words are meant to be chewed on more as appetizers than something like a final course. They offer a path, trampled in the hopes of offering passage – not to an automatic destination, but to places for possible, conscious, even mischievous departure.
<body>The first step: establish the size of the main text. This becomes the base against which all other variations in type size will be chosen and defined.
Here, it pays to work with the grain. Rather than styling everything from scratch, start out by carefully considering what the browser offers by default. Write the CSS from there, as a minimal expression of differences from the default style. This approach gets the job done using the least amount of code, yielding a positive impact on page download speed and the ease with which changes can be made in the future (assuming less code means there is less to understand, maintain, and edit).
Without any custom CSS, the browser’s standard font settings determine the size of the main text. Most web browsers used by people today (Internet Explorer, Firefox, Safari, Opera) set the default font-size to 16px. Users may adjust this to their own taste, perhaps increasing it if they prefer to read text at a larger size.
Whatever the value of the browser’s setting for font-size, it first cascades into the DOM to effect the font-size of the <body> element. In HTML documents, the <body> element is the root of all other visual elements. Its properties are passed onto everything below it, so it acts as a typographic base for the whole document. Its descendants are destined to share its appearance unless they define a set of relational differences to it.
As luck would have it, the tags comprising the main text (such as <p>, <li>, and <blockquote>) all inherit the font-size of the <body> element. Therefore, the simplest way to establish the main text size is to adjust the font-size of the <body>.
<body> font-size using %Most users won’t adjust their browser’s font settings, so the most common default font-size – the one to generally design against – is 16px. For some texts, this size works well, for others, something larger or smaller might be more suitable.
Regardless, the font-size of the <body> should be declared using the % unit of measure, even if the value is 100%. For example, to set the main text, on average, to 12px, use the following expression (keeping in mind that 12px is 75% of 16px):
body { font-size: 75%; }
To keep the main text at 16px, use:
body { font-size: 100%; }
This approach has two principal benefits over using other units of measure. First, it insures that the base font-size responds to the user’s preferences; if a user increases their browser’s default text size via the preferences dialog, the base size will also increase. Secondly, setting the <body> font-size in % enables Internet Explorer users to increase or decrease the size of the text at a rate similar to that found in other browsers.
<body> line-height sets page tempoEnter rhythm: set the line-height of the body to awaken the beat of the page. The line-height property accomplishes what’s traditionally known in typography as setting the leading. The difference between the line-height and the font-size expresses amount of space between two lines of text.
Whenever possible, line-height values should be set as a number, without any units. Applied to the <body> element, this will insure consistency in the proportion of line-height throughout the document, regardless of variations to font-size.
For example, if the <body> line-height is set to 1.25, then the computed line-height will always be 1.25 × the font-size of the element, unless stated otherwise. If the <body> font-size is set to 100%, it will typically have a computed size of 16px, which yields a line-height of 20px (16 × 1.25 = 20). If the font-size is increased to 150% (which, on average, is 24px), then the line-height will automatically adjust to 24 × 1.25 = 30px.
The main benefit of setting line-height as number sans units: all descendant elements will have the same proportional line-height, even if they have a different font-size. If an <h1> element were added as a child to the <body> and set at a larger font-size, the line-height of the <h1> would still be 1.25 times the larger font-size. It would appear to proportionally have the same line spacing as the main text (e.g. single spaced, double spaced, or, in this case, 1¼ spaced).
While this flexibility is great, it’s still useful to keep the computed size of the <body> line-height in mind as px. This amount expresses a beat, repeated vertically, down the length of the text block, like the lines on ruled notebook paper.
In the example just given, the computed <body> line-height was 20px. For such a page, the first beat would end at 20px, the next at 40px, and so on, down the textblock. Each line of the main text should run precisely across each beat, e.g. bottom of the first line at 20px, bottom of the second at 40px, and so on…
This number – the line-height of the <body> – is so integral to the harmony of the page, I’ve taken the liberty of following Bringhurst’s lead to denote it with a special symbol, λ (the Greek letter lambda). Given its typical usage in particle physics to indicate wavelength, λ seems an apt symbol to signify the line-height of the body because it associates the value with rhythm.
λ provides a convenient unit of measure with which to size subheadings and the spacing around them. The subheadings in this document, leaded with a single, white line before and after, aspire to let the page breathe and provide syncopation. However, in the words of Bringhurst, they must be spaced such that the main text remains aligned precisely on beat and in phase
– in other words, each subheading’s line-height, padding-top and padding-bottom must be set with values that add up to an exact multiple of λ. That way, the main text can resume precisely in phase, as if it only had other lines of main text beating before it.
<body>Once the font size of the <body> has been established, most other elements can be sized in relation to it, using the em unit of measure. (Some elements may still need to be sized independently from the main text, such as ones designed to shrink-wrap a background image. These should generally be sized in px).
emA relative unit of measure, an em expresses length relative to an element’s font-size. If an element’s font-size is 10px, then one em equals 10px, 1.5em equals 15px, 2em equals 20px, and so on.
There’s one wrinkle to this rule of thumb: if em expresses length relative to an element’s font-size, what if an element’s font-size is itself set in em? In that case only, em acts a multiple of the parent element’s font-size.
As an example, consider the following HTML:
<html>
<head>
<style>
body { font-size:100%; }
h1 { font-size:1.5em; padding-bottom:1.5em; }
</style>
</head>
<body>
<h1>Hello</h1>
<p>This is an example.</p>
</body>
</html>
In this case, the computed px values for the <h1> element’s em sizings are as follows (assuming a 100% font-size on the <body> equals 16px):
h1 style property |
value | em = |
font-size of | computed px value |
| font-size | 1.5em |
16px |
parent | 1.5 × 16 = 24px |
| padding-bottom | 1.5em |
24px |
element | 1.5 × 24 = 36px |
The first line of this table reflects the exception to the general rule: to calculate the px value of any font-size value set in em, multiply it by the px value of the element’s parent node (in this case, the <body>). For any other style value set in em – including margin, padding, width, or height – multiply the em value by the computed font-size of the element itself.
The mechanics of the em unit offer an excellent way to size child elements in relation to their parents. In fact, if every child element defines its sizing values in em, a chain reaction is set off. Each child becomes proportionally bound to its parent, which in turn is bound to its parent, all the way up to the root element, ancestor of all. In this way, the proportions of the whole document end up being defined in relation to a single, shared value: the font-size of the <body>.
Documents sized in this way enjoy a golden property, one that most web pages would do well to provide: proportional scaling. Should the user or designer change the base font-size, all the other elements on the page will resize accordingly, preserving their original proportion to the <body>. It will look as if the view has just been zoomed in or out.
This is particularly helpful if the type sizes have been chosen in relation to one another, e.g. composed using a scale. Regardless of the extent to which the <body> font-size is decreased or enlarged, each typographic element will maintain its proportional, scalar relationship with all the others. Everything stays in tune.
With the physics of the em unit covered, it’s time to finally discuss how to put it to good use. Some typographic elements are naturally well-suited to having a different font-size than the rest of the main main text, such as subheadings. For these, each variation in size may be selected from a scale where the em relationships have been figured out: the size of the main text can occupy one slot on the scale, and the other slots are set some distance away, in em.
I’ve included several scales in the panel, all derived from Bringhurst’s examples in The Elements of Typographic Style. I use the word “derived” because whereas Bringhurst suggests points or picas as the units of his examples, I’ve had to remap those units into the oddly elastic world of the browser.
There are many ways to see the same thing, and this couldn’t be more true of the scales. The visual thinker in me likes to look at them with no units at all, as just a simple series of shapes. My inner mathematician enjoys perusing what I’ve called the scale units – the pure numbers behind the scale. Those making up the Traditional scale were lifted from the point sizes of the traditional series as documented by Bringhurst and others, a collection of sizes consistently chosen, named and used by typographers over roughly the last half millennium. The Fibonacci numbers reflect the golden ratio, φ, in ever increasing degrees of accuracy. More information about Le Corbusier’s Modular scale may be found in Bringhurst’s book or on the web.
For the practical web typographer, however, the em and px units of measure have much to tell. The font-size value of each subheading may be observed at a glance by noting the number to the right of its respective sizing box.
The pink box represents the font-size of the <body>. Just as this value acts as a typographic foundation, determining the relative size of each element throughout the document, it also establishes the actual size of the slots above and below it in the scale. Move the pink box down, and the size of each box on the scale shrinks behind it. Move it up, and every box after it enlarges. Change the base font-size, and the whole scale expands or contracts accordingly.
When dragged to different places on the scale, the pink base box remains the same size. The scale doesn’t resize it – it resizes the scale. The square to the right of it always locks to its size, leaving the slots before and after it to resize themselves according to their respective position on the scale.
Upon the selection of a different scale from the drop down menu, any given subhead might become out of tune. This happens when its size no longer matches that of any box on the scale. When this happens, its proxy icon is placed into a box of out-of-scale elements. Restore its congruency by dragging it back onto the scale and dropping it into any slot.
Whenever a subhead is resized, the code tries to automatically preserve the vertical rhythm of the page. It looks at the line-height of the subhead, adds a “white line” padding of that height above and below the text, then adds just enough extra leading to the padding to snap the height of the whole thing to an exact multiple of λ.
At this point, you might be asking: “Why set subhead padding rather than margin?” The answer: vertical margin collapses between two block elements. If you have an h2 sized to 4λ below an h1 sized to 5λ, they need to add up to 9λ (or some other whole number) to maintain accurate rhythm. If we set margins rather than padding, the top margin of the h2 will collapse, nudging its text content right up to the bottom margin of the h1. Taken together, the sum of the vertical space occupied by the h1 and h2 will be less than 9λ, and probably not a whole number, breaking the rhythm.
Although the algorithm for maintaining rhythm generally produces a good, standard look, some typographers might want to set subhead padding a bit differently – perhaps taking leading out of the white lines rather than adding to them, or setting top and bottom padding to asymmetric lengths, or something else.
Another thing: it’s impossible to maintain accurate vertical rhythm on webkit (at least the version of webkit bundled into Safari 3 of the time of this writing):
Some subheadings are spaced in a way that require accurate, sub-pixel height summation to preserve vertical rhythm. For example, if λ = 20px, then a heading with a computed line height of 23.3333px and computed top and bottom vertical padding each of 18.3333px will allow the text to resume on beat. This works fine in most browsers (23.3333 + (18.3333 × 2) ≈ 60px, which is exactly 3 × λ, the base line-height).
Safari 3, however, rounds computed px values to the nearest integer. So, in the above example, the math ends up looking like 23 + (18 × 2) = 59px. The more of these kinds of headings there are, the more the vertical rhythm will drift out of phase (in this case, by 1px per line of heading).
To review accuracy of your typographic layout, you’re better off using Firefox. If you are reading this page with Firefox, I provide the option to see ruled lines when λ = 20px. On Safari, I don’t even bother.
As a parting shot, I wrote the beginnings of a layout panel. Please pardon the cryptic variables: w stands for page width, h for page height, P for page proportion (h/w), t for top margin, l for left margin, b for bottom margin, and r for right margin. The terms are straight out of Bringhurst’s chapter on “Shaping the Page”.
At the moment, you can only futz with the page width, w. If you choose to add the layout panel’s sizings to the output generated by the code panel, you need to introduce the concept of a page containing a textblock into your markup, e.g.:
<body>
<div id="page">
<div id="textblock">
<h1>heading</h1>
(rest of content)
</div>
</div>
</body>
h1 is its first child: it looks at the value of l and subtracts the top padding and leading of the h1.
As you fiddle with the panel settings, you may view the state of the CSS at anytime by clicking the “show” link on the code panel. Feel free to copy/paste it into your own pages.
Thus ends – or shall I say begins – this exploration of scale and rhythm. My intention has been to offer a descriptive survey rather than to prescribe an unwavering tedium of rules. Your work will inevitably want to march to the beat of its own drum, in its own key. May you find the art, or may the art find you.
If you’re wondering what this page would look like in a different typeface, with different content, etc., check out firebug. It allows you to dynamically futz with the presentation, even content, of the page.
Thanks for reading!
— Iain Lamb • 2009